<template>
    <div class="partner-container">
      <div style="background: #faf0e6;opacity: .8;margin-top:-10px;height: 30px">
        <el-row>
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '../shouYe' }"style="margin-left: 30px;margin-top: 8px">首页</el-breadcrumb-item>
            <el-breadcrumb-item style="margin-top: 8px"><i class="el-icon-office-building"></i>业务信息</el-breadcrumb-item>
            <el-breadcrumb-item style="margin-top: 8px"><i class="el-icon-s-custom" aria-hidden="true"></i>快递合作</el-breadcrumb-item>
          </el-breadcrumb>
        </el-row>
      </div>
      <el-row>
        <el-form label-width="80px">
          <el-row>
            <el-col :span="8" style="margin-top: 10px">
              <el-form-item label="快递公司" label-width="80px">
                <el-input style="height: 8%"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8" style="margin-top: 10px">
              <el-form-item>
                <el-button type="success" style="background-color: cornflowerblue">
                  <i class="fa fa-search" aria-hidden="true"></i>
                  搜索Search
                </el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-row>
      <el-row>

        <el-button-group>

          <el-button @click="btnAddClick" type="primary" icon="el-ico-edit" style="text-align: center">
            <i aria-hidden="true" class="fa fa-plus">添加</i>
          </el-button>

          <el-button type="warning">
            <i  aria-hidden="true" class="fa fa-pencil-square-o">修改</i></el-button>

          <el-button type="danger" >
            <i aria-hidden="true" class="fa fa-trash">删除</i></el-button>

        </el-button-group>

        <el-table :data="tableData"
                  border
                  stripe
                  style="width :100%;height: 60%">
          <el-table-column
            prop="name"
            label="公司名称"
            width="180"
          ></el-table-column>
          <el-table-column
            prop="phone"
            label="公司电话"
          ></el-table-column>
          <el-table-column
            prop="address"
            label="公司地址">
          </el-table-column>
          <el-table-column
            prop="date"
            label="合作日期">
          </el-table-column>

          <el-table-column
            prop="limit"
            label="合作年限">
          </el-table-column>
        </el-table>

        <el-button-group>
          <el-button type="primary" icon="el-icon-arrow-left">上一页</el-button>

          <el-button type="primary">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
        </el-button-group>

      </el-row>

    </div>



</template>

<script>
    export default {
        name: "partner", data(){
        return{

          tableData:[],
          dialogFormVisible: false,
          formLabelWidth: '120px',
          partner:{
            name:'',
            phone:'',
            address:'',
            data:'',
            limit:''
          }
        }
      },mounted() {
        /*挂载结束之后*/
        var _this=this;
        this.axios({
          url:'http://localhost:3000/partner/list',
          method:'get'
        }).then(function (res) {
          _this.tableData=res.data;
        })
      },
      methods:{
        btnAddClick(){
          this.dialogFormVisible = true;
        },
        handleClose(){
          this.dialogFormVisible=false;
        },
        sumbmitHandle(){
          var _this=this;
          this.axios({
            url:'http://127.0.0.1:3000/partner/add',
            method:'get',
            params:{
              name:this.partner.name,
              phone:this.partner.phone,
              address:this.partner.address,
              date:this.partner.date,
              limit:this.partner.limit
            }
          }).then(function (res) {
            if(res.data.flag){
              _this.$message('添加成功')
              _this.dialogFormVisible=false;
            }else{
              alert('添加失败');
            }
          })
        }
      }

    }

</script>

<style scoped>

</style>
